<template>
  <div class="user">
    <div class="heads">
      <div class="fh" @click="$router.push({ path: '/Home' })">
        <span class="iconfont icon-arrow-left-bold"></span> 返回
      </div>
      <div class="center">账号</div>
      <div class="shuJ"  @click="$router.push({ path: '/Home' })"><span class="iconfont icon-shujia"></span> 主页</div>
    </div>
    <div class="acinfo">
      <div class="img"></div>
      <div class="name">
        <div class="username">qqcuidongsan<span class="lv">Lv 1</span></div>
        <div class="loginName">登录账号: qqcuidongsan</div>
      </div>
    </div>
    <div class="list">
      <div class="item con">
        <div class="title">余额</div>
        <div class="nub">充值送红包</div>
        <router-link class="btn" tag="div" to="/congzhi">充值</router-link>
      </div>
      <div class="item con">
        <div class="title">当前可用红包</div>
        <div class="nub">红包抵阅点</div>
        <router-link class="btn" tag="div" to="/grant">兑换</router-link>
      </div>
      <div class="item">
        <div class="title">积分</div>
        <div class="nub">还没有积分哦</div>
      </div>
    </div>
    <div class="my-box">
      <div class="item">
        <div class="title">我的书架</div>
        <router-link class="nub" tag="div" to="/bookshelf">{{myBook}}本</router-link>
      </div>
    </div>
    <div class="delUser">
      <div class="link">下载诗珊阅读客户端</div>
      <div class="del" @click="del">退出登录</div>
    </div>
    <footer>
      <nav class="channel">
        <span>男生</span>
        <span>女生</span>
        <span>出版</span>
        <span>客服</span>
        <span>微信</span>
      </nav>
      <nav>
        <span>客户端</span>
        <span>帮助</span>
        <span clspanss="cur">触屏版</span>
        <span>电脑版</span>
      </nav>
      <div class="m-right"><p>网易公司版权所有©1997-2021</p></div>
    </footer>
  </div>
</template>

<script>
export default {
  data(){
    return{
      myBook:0
    }
  },
  methods:{
    del(){
      window.localStorage.removeItem("token");
      window.localStorage.removeItem('user');
      this.$router.push({path:'/login'})
    }
  },
  created(){
    let user=JSON.parse(window.localStorage.getItem('user'));
    if(user){
      if(user[0].userBooks){
        this.myBook=user[0].userBooks.length;
      }
    }
    // console.log(user)

  },
  beforeRouteEnter(to,from,next){
    let token=window.localStorage.getItem('token')
    console.log(token);
    if(to=='/login'){
      next()
    }
    if(token){
      next()
    }else{
      next('/login')
    }
    
  }
};
</script>

<style lang="less">
.user {
  .heads {
    width: 100%;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    color: #fff;
    background-color: #333;
    height: 44px;
    line-height: 44px;
    .fh {
      padding-left: 10px;
    }
    .shuJ {
      padding-right: 10px;
    }
  }
  .acinfo {
    height: 70px;
    background-color: #fff;
    margin: 0 0 10px 0;
    padding: 15px;
    display: flex;
    .img {
      margin: 0 15px 0 0;
      border-radius: 50%;
      width: 70px;
      height: 70px;
      background-color: pink;
    }
    .name {
      display: flex;
      flex-direction: column;
      .username {
        margin: 6px 0 8px;
        font-size: 17px;
        color: #626358;
        height: 24px;
        line-height: 24px;
        overflow: hidden;
        font-weight: bold;
        .lv {
          font-size: 12px;
          padding: 0 2px;
          color: #fff;
          background-color: #ff6501;
          border-radius: 3px;
          font-weight: normal;
          margin-left: 5px;
        }
      }
      .loginName {
        color: #aba59a;
        line-height: 24px;
      }
    }
  }
  .list {
    margin-top: 15px;
    background-color: #fff;
    .con{
      border-bottom: 1px solid #f2f3f5;
    }
    .item {
      height: 55px;
      margin-left: 15px;
      padding-right: 15px;
      line-height: 55px;
      font-size: 16px;
      display: flex;
      align-items: center;
      .title {
        color: #6c6358;
        width: 41%;
      }
      .nub {
        color: #aba59a;
        width: 41%;
      }
      .btn {
        height: 28px;
        line-height: 28px;
        padding: 0 13px;
        border: 1px solid #ed6460;
        color: #ed6460;
        background-color: #fff;
        text-align: center;
        border-radius: 5px;
      }
    }
  }
  .my-box {
    background-color: #fff;
    margin-top: 10px;
    .item {
      height: 55px;
      margin-left: 15px;
      padding-right: 15px;
      line-height: 55px;
      font-size: 16px;
      display: flex;
      align-items: center;
      .title {
        color: #6c6358;
        width: 41%;
      }
      .nub {
        color: #aba59a;
      }
      .btn {
        height: 28px;
        line-height: 28px;
        padding: 0 13px;
        border: 1px solid #ed6460;
        color: #ed6460;
        background-color: #fff;
        text-align: center;
        border-radius: 5px;
      }
    }
  }
  .delUser {
    margin-top: 10px;
    background-color: #fff;
    padding: 50px 15px 25px;
    div {
      height: 40px;
      line-height: 40px;
      text-align: center;
      &.link {
        height: 38px;
        line-height: 38px;
        border: 1px solid #ed6460;
        color: #ed6460;
        background-color: #fff;
        border-radius: 6px;
      }
      &.del {
        height: 40px;
        line-height: 40px;
        color: #545454;
        background-color: #f5f5f5;
        margin-top: 10px;
      }
    }
  }
  footer{
    text-align: center;
    color: #999;
    font-size: 12px;
    line-height: 25px;
    padding-top:10px ;
    span{
      margin:0 15px;
    }
  }
}
</style>